import useDelData from '@/hooks/use-del-data'
import useFetchList from '@/hooks/use-fetch-list'
import useInsert from '@/hooks/use-insert'
import { Button, Form, Input, message, Modal, Radio, Space, Table } from 'antd'
import React from 'react'
import { checking } from './registerUserCheck.config'

function RegisterUserCheck() {
  const { dataSource, total, filterParams, setFilterParams, getData } = useFetchList({
    url: '/admin/base/user/page',
    defaultParams: {
      isback: false
    }
  })
  const { ids, setIds, delData } = useDelData({
    url: "/admin/base/user/delete",
    success: () => {
      setFilterParams({
        ...filterParams,
        page: 1
      })
    }
  })
  const checkUser = (checking, id) => {
    const checkName = checking == '1' ? '通过' : '拒绝'
    Modal.confirm({
      title: `确认${checkName}吗？此操作不可逆`,
      onOk() {
        fetch('/admin/base/user/update', {
          method: "POST",
          body: JSON.stringify({ checking, id }),
          headers: {
            "Content-Type": "application/json"
          }
        }).then(res => res.json()).then(res => {
          console.log(res)
          message.success(`${checkName}成功`);
          setFilterParams({...filterParams,page:1})
        })
      }
    })
    
  }
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
      key: 'id',
    },
    {
      title: '手机号',
      dataIndex: 'username',
      key: 'id',
    },
    {
      title: '密码',
      dataIndex: 'password',
      key: 'id',
    },
    {
      title: '审核状态',
      dataIndex: 'checking',
      key: 'id',
      render: (text) => {
        switch (text) {
          case '0':
            return '审核中'
          case '1':
            return '已通过'
          case '2':
            return '未通过'
        }
      }
    },
    {
      title: '审核',
      dataIndex: 'checking',
      key: 'id',
      render: (text, item) => {
        return (
          <Space>
            <Button type='primary' disabled={text !== '0'} onClick={() => checkUser('1', item.id)}>通过</Button>
            <Button danger disabled={text !== '0'} onClick={() => checkUser('0', item.id)}>拒绝</Button>
          </Space>
        )
      }
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (test, item) => {
        return (
          <Space>
            <Button danger onClick={() => delData([item.id])}>删除</Button>
          </Space>
        )
      }
    },
  ];
  const [form] = Form.useForm()
  const { handleOk, setIsModalOpen, isModalOpen } = useInsert({
    form,
    createData: (data: any) => {
      fetch("/admin/base/activityManage/add", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        // console.log(res)
      })
    },
    success: () => {
      setFilterParams({ ...filterParams, page: 1 })
    },
  })
  //modal
  const handleCancel = () => {
    setIsModalOpen(false)
  }
  return (
    <div>
      <Space>
        <Button onClick={() => getData()}>刷新</Button>
        <Button disabled={ids.length === 0} danger onClick={() => delData()}>删除</Button>
        <Radio.Group size='large' defaultValue="" onChange={(e) => {
          setFilterParams({
            ...filterParams,
            page: 1,
            checking: e.target.value,
          } as any)
        }}>
          {
            checking.map((item, index) => (
              <Radio.Button key={index} value={item.value}>{item.label}</Radio.Button>
            ))
          }
        </Radio.Group>
        <Input placeholder='请输入用户名' onChange={(e) => {
          setFilterParams({
            ...filterParams,
            page: 1,
            username: e.target.value,
          } as any)
        }}></Input>
      </Space>
      <Table style={{ marginTop: '20px' }} columns={columns} dataSource={dataSource} pagination={{
        total,
        pageSize: filterParams.size,
        current: filterParams.page,
        onChange: (page) => {
          setFilterParams({
            ...filterParams,
            page,
          })
        }
      }}
        rowSelection={{
          type: 'checkbox',
          onChange: (keys) => {
            // console.log(keys);
            setIds(keys)
          }
        }} />
    </div>
  )
}

RegisterUserCheck.wrappers = ["@/wrappers/auth"]
export default RegisterUserCheck